<template>
	<div class="video_clip_resource">
		<div class="header">
			<el-button size="small" type="primary" icon="el-icon-plus">添加视频</el-button>
			<el-button size="small" type="warning" @click="handleStartMerge()">{{ !isMerge ? '合并视频' : '取消合并' }}</el-button>
			<el-button size="small" type="danger" @click="handleStartDelete()">{{ !isDelete ? '批量删除' : '取消删除' }}</el-button>
		</div>
		<div class="listbox">
			
		</div>
		<div class="datasize">
			<template v-if="!isCanCheck">
				<p>视频剪辑附件大小限制Mb</p>
			</template>
			<template v-else-if="isMerge">
				<el-button size="small" type="warning" icon="el-icon-video-merge" @click="handleConfirmMerge()">确定合并</el-button>
			</template>
			<template v-else-if="isDelete">
				<el-button size="small" type="danger" icon="el-icon-delete" @click="handleConfirmDelete()">确定删除</el-button>
			</template>
		</div>
	</div>
</template>

<script>
import videoItem from './videoItem';
import { getAttachList } from '@/api/global';
export default {
	components: { videoItem },
	data() {
		return {
			isFirst: true,
			loading: false,
			queryData: {
				page: 1,
				limit: 14
			},
			dataCount: 0,
			videoList: [],
			checkedData: [],
			isMerge: false,
			isDelete: false
		};
	},
	computed: {
		noMore() {
			return this.dataCount <= this.videoList.length;
		},
		disabled() {
			return this.loading || this.noMore;
		},
		isCanCheck() {
			return this.isMerge || this.isDelete;
		}
	},
	mounted() {
		this.loading = true;
		this.getAttachList();
	},
	methods: {
		//获取附件列表
		async getAttachList() {
			let params = { ...this.queryData, operDel: 1, type: 6 };
			let result = await getAttachList(params).then((res) => res.data);
			this.isFirst = false;
			this.loading = false;
			if (result.code === '0') {
				let datas = result.data || [];
				this.dataCount = parseInt(result.count);
				this.videoList = [...this.videoList, ...datas];
			}
		},

		//滚动加载数据
		handleScrollLoad() {
			let page = this.queryData.page;
			let limit = this.queryData.limit;
			if (page * limit < this.dataCount) {
				this.loading = true;
				this.queryData.page++;
				this.getAttachList();
			}
		},

		//选择视频
		handleItemClick(data) {
			if (this.isCanCheck) return false;
			this.$emit('selected', data);
		},

		//拖动结束
		handleDragEnd(e, data) {
			console.log(e, data);
		},

		//开始合并
		handleStartMerge() {
			this.isDelete = false;
			this.checkedData = [];
			this.isMerge = !this.isMerge;
		},

		//开始删除
		handleStartDelete() {
			this.isMerge = false;
			this.checkedData = [];
			this.isDelete = !this.isDelete;
		},

		//确定合并
		handleConfirmMerge() {
			if (this.checkedData.length === 0) return false;
			console.log(this.checkedData);
		},

		//确定删除
		handleConfirmDelete() {}
	}
};
</script>

<style lang="scss" scoped>
.video_clip_resource {
	display: flex;
	flex-direction: column;
	width: 290px;
	flex-shrink: 0;
	border-right: solid 1px #ebeef5;
	.header {
		padding: 10px;
		flex-shrink: 0;
		border-bottom: solid 1px #ebeef5;
		.el-button {
			font-size: 13px;
			padding: 6px 10px;
		}
	}
	.listbox {
		flex: 1;
		overflow: hidden;
		overflow-y: auto;
		padding-bottom: 10px;
	}
	
	.datasize {
		display: flex;
		align-items: center;
		justify-content: space-between;
		flex-shrink: 0;
		padding: 10px;
		border-top: solid 1px #ebeef5;
		p {
			height: 32px;
			line-height: 32px;
		}
	}
}
</style>
